<template>
  <div class="main-layout">



    <!-- 主内容区域 -->
    <div class="main-content">
      <!-- 侧边栏 -->
      <div class="sidebar">
        <div class="sidebar-header">
          <div class="sidebar-title">功能导航</div>
        </div>
        <div class="sidebar-nav">
          <div
            v-for="route in navigationRoutes"
            :key="route.path"
            class="nav-item"
            :class="{ active: $route.path === route.path }"
            @click="navigateTo(route.path)"
          >
            <span class="nav-icon">{{ route.meta?.icon }}</span>
            {{ route.meta?.title }}
          </div>
        </div>
      </div>

      <!-- 工作区域 -->
      <div class="workspace">
        <!-- 主要内容 -->
        <div class="main-content-area">
          <router-view v-slot="{ Component }">
            <transition name="fade" mode="out-in">
              <component :is="Component" />
            </transition>
          </router-view>
        </div>
      </div>
    </div>

    <!-- 状态栏 -->
    <div class="status-bar">
      <div class="status-left">
        <div class="status-indicator">
          <div class="status-dot" :class="statusType"></div>
          {{ statusText }}
        </div>
        <div class="progress-bar">
          <div class="progress-fill" :style="{ width: progress + '%' }"></div>
        </div>
        <span>{{ Math.round(progress) }}%</span>
        <span>已爬取: {{ crawledCount }} 条</span>
        <span>用时: {{ elapsedTime }}</span>
      </div>
      <div>
        <span>内存: {{ memoryUsage }}</span>
        <span style="margin-left: 20px;">{{ currentTime }}</span>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useAppStore } from '@/stores/app'

const router = useRouter()
const route = useRoute()
const appStore = useAppStore()

// 导航路由
const navigationRoutes = computed(() => {
  return router.getRoutes().filter(route => route.meta?.title)
})

// 状态数据
const statusText = ref('就绪')
const statusType = ref('success')
const progress = ref(75)
const crawledCount = ref(1234)
const elapsedTime = ref('05:23')
const memoryUsage = ref('256MB')
const currentTime = ref('')

// 更新时间
const updateTime = () => {
  currentTime.value = new Date().toLocaleString('zh-CN')
}

// 导航到指定路由
const navigateTo = (path: string) => {
  router.push(path)
}



// 模拟进度更新
const updateProgress = () => {
  if (progress.value < 100) {
    progress.value += Math.random() * 2
    if (progress.value > 100) progress.value = 100
  }
}

onMounted(() => {
  updateTime()
  setInterval(updateTime, 1000)
  setInterval(updateProgress, 2000)
})
</script>

<style scoped>
.main-layout {
  display: flex;
  flex-direction: column;
  height: 100vh;
}





/* 主内容区域 */
.main-content {
  display: flex;
  flex: 1;
  overflow: hidden;
}

/* 侧边栏 */
.sidebar {
  width: 250px;
  background: white;
  border-right: 1px solid #e0e6ed;
  display: flex;
  flex-direction: column;
}

.sidebar-header {
  padding: 20px;
  border-bottom: 1px solid #e0e6ed;
  background: #f8f9fa;
}

.sidebar-title {
  font-size: 16px;
  font-weight: 600;
  color: #495057;
}

.sidebar-nav {
  flex: 1;
  padding: 10px 0;
}

.nav-item {
  padding: 12px 20px;
  cursor: pointer;
  transition: all 0.2s;
  border-left: 3px solid transparent;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
}

.nav-item:hover {
  background: #f8f9fa;
  border-left-color: var(--el-color-primary);
}

.nav-item.active {
  background: var(--el-color-primary-light-9);
  border-left-color: var(--el-color-primary);
  color: var(--el-color-primary);
  font-weight: 500;
}

.nav-icon {
  font-size: 16px;
  width: 20px;
  text-align: center;
}

/* 工作区域 */
.workspace {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* 主要内容区域 */
.main-content-area {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  background: #f8f9fa;
}

/* 状态栏 */
.status-bar {
  background: #f8f9fa;
  border-top: 1px solid #e0e6ed;
  padding: 8px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  color: #6c757d;
}

.status-left {
  display: flex;
  align-items: center;
  gap: 20px;
}

.status-indicator {
  display: flex;
  align-items: center;
  gap: 6px;
}

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.status-dot.success { background: #28a745; }
.status-dot.warning { background: #ffc107; }
.status-dot.danger { background: #dc3545; }

.progress-bar {
  width: 200px;
  height: 6px;
  background: #e9ecef;
  border-radius: 3px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--el-color-primary), #764ba2);
  transition: width 0.3s;
}

/* 过渡动画 */
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .sidebar {
    width: 200px;
  }
  
  .main-content-area {
    padding: 10px;
  }
}
</style>